<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				/*注意：当body高是0时，背景也显示，不知为啥，但事实如此*/
				background-attachment: fixed;/*定位背景图不滚动，类似定位的fixed，设置了这个，background-size的百分比是按屏幕来算了，试出来的，不权威*/
				background-image: url(img/000.jpg);
				background-size: 100% 100%;
				/*background-attachment: local;*/
			}
			h1{
				color: wheat;
			}
			.box{
				height: 200px;
				background-color: cadetblue;
				margin-bottom: 40px;
				position: relative;
			}
			.box1 > div{
				position: absolute;
				left: 50%;
				top: 40%;
				text-align: center;				
			}
			.box1 span{
				display: block;
				width: 40px;
				height: 40px;
				text-align: center;
				border-radius: 20px;
				background-color: lightgray;
				line-height: 40px;
				font-size: 20px;
				position: relative;
				z-index: 10;
			}
			.box1 p{
				position: absolute;
				opacity: 0;
				top: 0;
				left: 0;
				margin: 0;
				height: 40px;
				border-radius: 20px;
				background-color: mediumpurple;
				line-height: 40px;
				font-size: 20px;
				width: 200px;
				transition: all 2s;
				transform-origin: 20px 20px;
			}
			.box1:hover p{
				opacity: 1;
				transform: rotate(360deg);
			}
			
			
			.box2 > div{
				position: absolute;
				left: 50%;
				top: 40%;
				text-align: center;				
			}
			.box2 span{
				display: block;
				width: 40px;
				height: 40px;
				text-align: center;
				border-radius: 20px;
				background-color: lightgray;
				line-height: 40px;
				font-size: 20px;
				transition: all 2s;
			}
			.box2:hover span{
				animation: shake 2s infinite;
				background-color: lightgreen;				
			}
			@keyframes shake{
				0%,10%,55%,90%,94%,98%,100%{
				   transform:scale(1,1);
				}
				30%{
				   transform:scale(1.14,0.86);
				}
				75%{
				   transform:scale(0.92,1.08);
				}
				92%{
				   transform:scale(1.04,0.96);
				}
				96%{
				   transform:scale(1.02,0.98);
				}
				99%{
				   transform:scale(1.01,0.99);
				}
			}
			
			.box3{
				column-count: 3;
				column-gap: 100px;
				column-rule: 3px solid burlywood;
			}
			
			.box4{
				background: url(img/003.jpg) no-repeat, url(img/002.jpg);
				background-size: 200px 200px;
				height: 300px;
			}
			
			.box5{
				outline: 2px solid chartreuse;
				border: 2px solid white;
				outline-offset: -20px;
			}
			
			
			.box6{
				height: auto;
			}
			.box6 > div:first-child{
				height: 100px;
				/*width: 100px;*/
				background-image: -webkit-linear-gradient(left top, #aec 10%, #f96 20%, #ccc, #000);
			}
			.box6 > div:nth-child(2){
				height: 100px;
				background-image: -webkit-linear-gradient(45deg, #aec 10%, #f96 20%, #ccc, #000);
			}
			.box6 > div:nth-child(3){
				height: 100px;
				background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(img/gradient13.png);
			}
			.box6 > div:last-child{
				height: 100px;
				background-image: radial-gradient();
			}
			
			
			.box7 p{
				/*-webkit-box-reflect: below 10px;*/
			}
			#a{
				-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
			    background: -webkit-linear-gradient(rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
			    background: -moz-linear-gradient(rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
			    background: -o-linear-gradient(rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
			    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(174,188,191,1)), color-stop(0.5, rgba(110,119,116,1)), color-stop(0.51, rgba(10,14,10,1)), to(rgba(10,8,9,1)));
			    background: linear-gradient(rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
			}
			
			.box8{
				font-size: 160px;
				-webkit-text-fill-color: black; 
				-webkit-text-stroke-color: red; 
				-webkit-text-stroke-width: 2.75px; 
				/*Text-fill-color: 文字内部填充颜色
				Text-stroke-color: 文字边界填充颜色
				Text-stroke-width: 文字边界宽度*/
			}
			
			
		</style>
	</head>
	<body>
		<h1>转</h1>
		<div class="box box1">
			<div>
				<span>张</span>
				<p>你看这是啥？</p>
			</div>
		</div>
		<h1>shake</h1>
		<div class="box box2">
			<div>
				<span>张</span>
			</div>
		</div>
		<h1>col</h1>
		<div class="box box3">
			《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。
		</div>
		<h1>多背景图</h1>
		<p>引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示</p>
		<div class="box box4">
			
		</div>
		<h1>outline</h1>
		<p>其实就是一个框，默认包在border外，outline-offset可以设置框离元素的距离，可正（在外）可负（在内）</p>
		<div class="box box5">
			
		</div>
		
		<h1>gradient</h1>
		
		<div class="box box6">
			<div></div>
			<div></div>
			
			<div><h2>渐变上应用透明度(Transparency)，相当于多url的方式</h2></div>
			<div></div>
		</div>
		
		<h1>reflect 反射，其实就是倒影效果</h1>
		<div class="box box7">
			<p id="a">hello</p>
		</div>
		
		<h1>文字渲染</h1>
		<div class="box box8">东莞虎门</div>
		
		<h1>background-break</h1>
		<div class="box box9">
			黄金矿工服
		</div>
	</body>
</html>
